<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/head.jsp" %>
<link rel="stylesheet" href="/resources/css/calendar/fullcalendar.min.css"/>
<link rel="stylesheet" href="/resources/css/calendar/fullcalendar.print.css" media='print'/>
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    <div class="row-content am-cf">
        <div class="tpl-calendar-box">
            <div id="calendar"></div>
        </div>
    </div>
</div>
<!-- 弹出层 -->
<div class="am-modal am-modal-no-btn" id="calendar-edit-box">
    <div class="am-modal-dialog tpl-model-dialog">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="am-close edit-box-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd tpl-am-model-bd am-cf">

            <form class="am-form tpl-form-border-form">
                <div class="am-form-group am-u-sm-12">
                    <label for="user-name" class="am-u-sm-12 am-form-label am-text-left">标题 <span
                            class="tpl-form-line-small-title">Title</span></label>
                    <div class="am-u-sm-12">
                        <input type="text" class="tpl-form-input am-margin-top-xs calendar-edit-box-title"
                               id="user-name" placeholder="" disabled>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>


<%@ include file="../common/foot.jsp" %>
<script src="/resources/js/calendar/moment.js"></script>
<script src="/resources/js/calendar/fullcalendar.min.js"></script>

<script>
    $(document).ready(function () {
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };
        var editBox = $('#calendar-edit-box');

        $('.edit-box-close').on('click', function () {
            $('#calendar').fullCalendar('unselect');
        });
        $('#calendar').fullCalendar({

            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''//month'//,agendaWeek,agendaDay'
            },

            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            today: ["今天"],
            firstDay: 1,
            buttonText: {
                today: '本月',
                month: '月',
                week: '周',
                day: '日',
                prev: '上一月',
                next: '下一月'
            },
            defaultDate: new Date().Format('yyyy-MM-dd'),
            lang: 'zh-cn',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            select: function (start, end) {
                if (start._d < new Date()) {
                    alert('选择日期必须大于当前日期.');
                    $('#calendar').fullCalendar('unselect');
                    return;
                }
                var title = prompt('填写你的记录的:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $.post('calendarAdd', {
                        title: title,
                        start: start._d.Format('yyyy-MM-dd HH:mm:ss'),
                        end: end._d.Format('yyyy-MM-dd HH:mm:ss')
                    }, function (data) {
                        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                    });


                }
                $('#calendar').fullCalendar('unselect');


            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            eventClick: function (event, jsEvent, view) {

                // event.source.events[0].title = '222223333'
                // 修改数据
                // 标题
                $('.calendar-edit-box-title').val(event.title);


                //  弹出框
                editBox.modal();


            },
            events: function () {
                var str = $.ajax({
                    type: "POST",
                    url: "calendarList",
                    async: false,
                    data: {}
                }).responseText;
                var json = JSON.parse(str);
                var temp = [];
                for (i in json) {
                    var jj = JSON.parse(json[i]);
                    jj.start = new Date(jj.start).Format("yyyy-MM-dd hh:mm:ss");
                    jj.end = new Date(jj.end).Format("yyyy-MM-dd hh:mm:ss");
                    temp.push(jj);
                }
                return temp;
            }()
        });

    });
</script>